<template>
  <div>
<!--    <st-header></st-header>-->
    <div class="box-center">
      <div class="sideEdge">
        <div v-for="(item,index) in  list" @click="changeItem(item)" :key="index" class="box-side " :class="{'box-side-info':active!==item.id}">
          {{ item.name }}
        </div>
      </div>
      <div class="right" v-loading="loading">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      active:1,
      loading:false,
      list:[
        {id:1,name:'任务列表',path:'/admin/index'},
        {id:2,name:'教室管理',path:'/admin/classRoom'},
        // {id:3,name:'',path:'/member/menu'},
        // {id:4,name:'权限管理',path:'/member/right'},
      ]
    }
  },
  methods:{
    changeItem(item){
      this.active = item.id
      this.loading=true
      setTimeout(()=>{
        this.loading=false
      },1000)
      this.$router.push(item.path).catch(err=>{})
    }
  },
  mounted() {
    this.active = this.$route.meta.active
  }
}
</script>

<style scoped lang="scss">
.box-center{
  width: 100%;
  min-height: calc(100vh - 80px);
  display: flex;
  justify-content: space-between;
  .sideEdge{
    width: 150px;
    min-height: calc(100vh - 80px);
    padding-top: 20px;
    box-sizing: border-box;
    margin-left: -20px;
    .box-side{
      width: 100%;
      height: 50px;
      padding: 0 25px;
      box-sizing: border-box;
      background: #333;
      border-radius: 0 5px 5px 0;
      line-height: 50px;
      font-size: 14px;
      color: #f6f6f6;
      margin-top: 15px;
      text-align: right;
    }
    .box-side-info{
      background: #f8f8f8;
      color: #666;
      border: 1px solid #f6f6f6;
      box-sizing: border-box;
      margin-top: 15px;
      width:150px;
    }
    .box-side-info:hover{
      background: #333;
      color: #fff;
      transition: 0.8s;
      width: 150px;
    }
  }
  .right{
    width: 100%;
    min-height: calc(100vh - 80px);
    padding: 15px 20px;
    box-sizing: border-box;
  }
}
</style>
